<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { Handle, Position, useVueFlow } from '@vue-flow/core'

defineOptions({
  name: 'STTNode'
})

const props = defineProps<{
  id: string;
  data: {
    name: string;
    algorithm?: string;
    model?: string;
    language?: string;
    confidenceThreshold?: number;
    enablePunctuation?: boolean;
    enableWordTimestamps?: boolean;
  };
  style?: Record<string, any>;
}>()

const { updateNodeData } = useVueFlow()
const name = computed({
  get: () => props.data.name,
  set: (name) => updateNodeData(props.id, {...props.data, name: name }),
})

import useConnectionValid from './ts/connectionValid';
const { isValidConnection } = useConnectionValid();

// STT configuration options
const algorithm = ref<AlgorithmType>(props.data.algorithm as AlgorithmType || 'whisper');
const model = ref(props.data.model || 'base');
const language = ref(props.data.language || 'en');
const confidenceThreshold = ref(props.data.confidenceThreshold || 0.8);
const enablePunctuation = ref(props.data.enablePunctuation ?? true);
const enableWordTimestamps = ref(props.data.enableWordTimestamps ?? false);

// Available options
const algorithmOptions = [
  { value: 'whisper', label: 'Whisper' },
  { value: 'wav2vec', label: 'Wav2Vec' },
  { value: 'deepspeech', label: 'DeepSpeech' }
] as const;

type AlgorithmType = typeof algorithmOptions[number]['value'];

const modelOptions: Record<AlgorithmType, Array<{ value: string; label: string }>> = {
  whisper: [
    { value: 'tiny', label: 'Tiny' },
    { value: 'base', label: 'Base' },
    { value: 'small', label: 'Small' },
    { value: 'medium', label: 'Medium' },
    { value: 'large', label: 'Large' }
  ],
  wav2vec: [
    { value: 'base', label: 'Base' },
    { value: 'large', label: 'Large' }
  ],
  deepspeech: [
    { value: '0.9.3', label: '0.9.3' }
  ]
};

const languageOptions = [
  { value: 'en', label: 'English' },
  { value: 'zh', label: 'Chinese' },
  { value: 'ja', label: 'Japanese' },
  { value: 'ko', label: 'Korean' }
];

// Watch for changes and update node data
watch(() => [
  algorithm.value,
  model.value,
  language.value,
  confidenceThreshold.value,
  enablePunctuation.value,
  enableWordTimestamps.value
], () => {
  updateNodeData(props.id, {
    ...props.data,
    algorithm: algorithm.value,
    model: model.value,
    language: language.value,
    confidenceThreshold: confidenceThreshold.value,
    enablePunctuation: enablePunctuation.value,
    enableWordTimestamps: enableWordTimestamps.value
  })
})
</script>

<template>
  <div class="NodeName">
    <input :id="`${id}-input`" v-model="name" class="nodrag" />
  </div>
  <div class="NodeContent">
    <!-- Input Handles -->
    <Handle id="flow-in" type="target" :class="['AgentFlowInputHandle', 'top-0']" :position="Position.Left" title="Flow In"
      :connectable="() => isValidConnection(props.id, 'flow-in', 'target')">
      <span class="HandleLeftSpan">Flow In</span>
    </Handle>
    <Handle id="cached-audio" type="target" :class="['AgentAudio', 'top-2']" :position="Position.Left" title="Cached Audio"
      :connectable="() => isValidConnection(props.id, 'cached-audio', 'target')">
      <span class="HandleLeftSpan">Cached Audio</span>
    </Handle>

    <!-- Output Handles -->
    <Handle id="flow-next" type="source" :class="['AgentFlowOutputHandle', 'top-0']" :position="Position.Right" title="Flow Next"
      :connectable="() => isValidConnection(props.id, 'flow-next', 'source')">
      <span class="HandleRightSpan">Flow Next</span>
    </Handle>
    <Handle id="msg" type="source" :class="['AgentMsg', 'top-2']" :position="Position.Right" title="Message"
      :connectable="() => isValidConnection(props.id, 'msg', 'source')">
      <span class="HandleRightSpan">Message</span>
    </Handle>

    <div class="NodeData">
      <!-- Algorithm Selection -->
      <div class="select-row">
        <label for="algorithm">Algorithm:</label>
        <select id="algorithm" v-model="algorithm" class="select-input nodrag">
          <option v-for="option in algorithmOptions" :key="option.value" :value="option.value">
            {{ option.label }}
          </option>
        </select>
      </div>

      <!-- Model Selection -->
      <div class="select-row">
        <label for="model">Model:</label>
        <select id="model" v-model="model" class="select-input nodrag">
          <option v-for="option in modelOptions[algorithm]" :key="option.value" :value="option.value">
            {{ option.label }}
          </option>
        </select>
      </div>

      <!-- Language Selection -->
      <div class="select-row">
        <label for="language">Language:</label>
        <select id="language" v-model="language" class="select-input nodrag">
          <option v-for="option in languageOptions" :key="option.value" :value="option.value">
            {{ option.label }}
          </option>
        </select>
      </div>

      <!-- Confidence Threshold -->
      <div class="input-row">
        <label for="confidenceThreshold">Confidence Threshold:</label>
        <input
          id="confidenceThreshold"
          type="number"
          v-model="confidenceThreshold"
          min="0"
          max="1"
          step="0.1"
          class="text-input nodrag"
        />
      </div>

      <!-- Checkbox Options -->
      <div class="checkbox-row">
        <label for="enablePunctuation">Enable Punctuation</label>
        <input
          id="enablePunctuation"
          type="checkbox"
          v-model="enablePunctuation"
          class="checkbox nodrag"
        />
      </div>

      <div class="checkbox-row">
        <label for="enableWordTimestamps">Enable Word Timestamps</label>
        <input
          id="enableWordTimestamps"
          type="checkbox"
          v-model="enableWordTimestamps"
          class="checkbox nodrag"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>


</style> 